<!-- 开奖记录 -->
<template>
  <div>
      <div class="open_list">
          <div style='height:73px;margin:4px 0px'>
            <div class="open_item" v-for="(item,index) in tickList" :key='index'>
                <img :src="item.tickSrc" alt="" class='logo'>
                <div class="content">
                <div class="line1">
                    <div class="name">{{item.name}}</div>
                    <div class="date">{{item.date}}</div>
                </div>
                <div class="line2">
                    <img :src="icon" alt="" class='k3num' v-for="(icon,index) in item.icons" :key="index">
                    <div class="Ball_lhc" v-for='(ball,index) in item.Ball_lhc' :key='index'>
                        {{ball.number}}
                        <img :src="ball.src" class='bg'>
                    </div>
                    <div class="num" :style="BaseDataa.ballStyle[ball]" v-for="(ball,index) in item.balls" :key="index">{{ball}}</div>
                </div>
                <div class="line3">
                    <div class="no">{{item.no}}</div>
                    <div class="history">
                    <img src="~images/icon/historyOpen.png" alt="" class='icon'>
                    历史开奖记录
                    </div>
                </div>
                </div>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
import BaseData from '../config/BaseData'
export default {
  props: ['tickList'],
  components: {},
  data () {
    return {
      BaseDataa: BaseData
    }
  },
  computed: {},
  methods: {}
}

</script>
<style lang='less' scoped>
.open_list, .open .open_list .open_item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.open_list {
    height:calc(100vh - 150px);
    flex: 1 1;
    width: 100%;
    overflow-y: scroll;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom:50px;
}
.open_list {
    display: -ms-flexbox;
    display: flex;
    background-color: #fff;
}
.open_list .open_item {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #efefef;
    margin: 4px 14px;
}
.open_list, .open_list .open_item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.open_list .open_item .logo {
    width: 56px;
    height: 56px;
    margin: 8px;
    margin-left: 0;
}
.open_list .open_item .content {
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.open_list .open_item .content .line1 {
    -ms-flex: 1 1;
    flex: 1 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 4px;
}
.open_list .open_item .content .line1 .name {
    white-space: nowrap;
    font-size: 14px;
    color: #272727;
}
.open_list .open_item .content .line1 .date {
    white-space: nowrap;
    color: #f45300;
}
.open_list .open_item .content .line2 {
    -ms-flex: 1 1;
    flex: 1 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    margin: 4px 0;
    overflow: hidden;
    color: #272727;
}
.open_list .open_item .content .line2 .k3num {
    width: 20px;
    height: 20px;
    margin: 0 4px;
}
.open_list .open_item .content .line3 {
    -ms-flex: 1 1;
    flex: 1 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.open_list .open_item .content .line3 .no {
    white-space: nowrap;
    color: #989898;
}
.open_list .open_item .content .line3 .history {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    color: #666;
}
.open_list .open_item .content .line3 .history .icon {
    height: 12.8px;
    margin-right: 2px;
}
.line2 .Ball_lhc {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: #666;
    font-size: 10px;
    margin-right:4px;
}
.Ball_lhc {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: #666;
    font-size: 10px;
    margin-right: 6px;
}
.line2 .Ball_lhc .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content .line2 .num {
    width:20px !important;
    height: 20px !important;
    border-radius: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    margin: 0 4px;
    font-size: 10px;
}
</style>
